<template>
  <div class="">
    <Headers :graphic="graphic" />
    <div class="banner">
      <div class="basic">
        <div class="title">基本情况</div>
        <div class="title-bottom"></div>
        <div class="text">
          &emsp;&emsp;1958年3月15日，经毛泽东主席亲自决策，中国人民解放军军事科学院成立，叶剑英元帅任首任院长兼政治委员。
          <br />
          &emsp;&emsp;2017年7月19日，习主席亲自为新调整组建的军事科学院授军旗、致训词。新的军事科学院以原军事科学院和军兵种、军委机关部分直属科研、
          编研机构为基础重新组建，现设有8个研究院、2个中心和1个研究生院。军事科学院现任院长为杨学军中将，政治委员为方向中将。
          <br />
          &emsp;&emsp;军事科学院是全军军事科学研究的拳头力量，承担着加强军事理论创新、加强国防科技创新、加强军事科研工作组织模式创新职责，肩负着加快发展现代军事科学、努力建设高水平军事科研机构的使命。作为首批国家高端智库，围绕军事、经济、科技和社会发展重大问题开展决策咨询研究，发挥党中央、中央军委的思想库、智囊团作用。
          <br />
          &emsp;&emsp;新的军事科学院学科布局从原有的军事学扩展到理、工、农、医、管、军等多个门类，涵盖国防政策、军事思想和军事战略、联合作战、军队政治工作、军事法治、后勤技术、信息化、人工智能、军事医学、国防工程规划与防护，以及国防科技情报信息等多个研究领域，形成了理论与技术相互融合支撑的全新发展格局。
        </div>
      </div>
      <div class="achievement">
        <div class="title text-center">突出成就</div>
        <div class="title-bottom margin-auto"></div>
        <div class="text">
          在军事理论研究方面，先后推出大批原创性、前瞻性、系统性的重要成果，发挥了研究宣传党的军事指导理论的骨干作用、服务军委决策的助手作用、推进军事科学发展的中心作用。在基础理论研究方面，推出了《战略学》《战役学》《中国人民解放军战史》等学术力作，组织编纂了《中国军事百科全书》和《军语》等权威辞书，编修了我军作战条令、共同条令、政治工作条例等
          200 余部军事法规。
        </div>
        <div class="card">
          <div class="leftbox colorbox">
            <i class="iconfont icon-jiantou_qiehuanzuo_o"></i>
          </div>
          <div class="rightbox colorbox">
            <i class="iconfont icon-jiantou_qiehuanyou_o"></i>
          </div>
          <div class="card-item">
            <div class="">国家科技进步</div>
            <div class="">
              <p>特等奖5项</p>
              <p>一等奖27项</p>
              <p>二等奖130余项</p>
            </div>
          </div>
          <div class="card-item">
            <div class="">国家技术发明</div>
            <div class="">
              <p>特等奖5项</p>
              <p>二等奖130余项</p>
            </div>
          </div>
          <div class="card-item">
            <div class="">军队科技进步</div>
            <div class="">
              <p>特等奖5项</p>
              <p>一等奖27项</p>
            </div>
          </div>
          <div class="card-item">
            <div class="">国家自然科学</div>
            <div class="">
              <p>特等奖5项</p>
            </div>
          </div>
        </div>
      </div>
      <div class="hospital">
        <div class="title text-center">研究院、部</div>
        <div class="title-bottom margin-auto"></div>
        <div class="text">
          军事科学院研究生院厢红旗校区位于北京市海淀区厢红旗“三山五园”之中；四海校区位于风景秀丽的昆玉河畔，周围名胜古迹遍布；太平路校区位于长安街
          沿线、五棵松附近。各校区自然环境优雅，保障设施完善，道路交通便利。
        </div>
        <div class="card">
          <el-carousel
            :interval="4000"
            :autoplay="false"
            type="card"
            width="500px"
            height="500px"
          >
            <el-carousel-item v-for="item in 6" :key="item">
              <div class="card-item">
                <img src="@/assets/imgs/card_item.png" alt="" />
                <div class="word">研究院、部名称</div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <div class="team">
        <div class="title text-center">师资队伍</div>
        <div class="title-bottom margin-auto"></div>
        <div class="there">
          <div class="there-item bd-right">
            <div>24</div>
            <div>两院院士</div>
          </div>
          <div class="there-item bd-right">
            <div>40</div>
            <div>专业技术三级以上专家</div>
          </div>
          <div class="there-item">
            <div>154</div>
            <div>国务院政府特殊津贴专家</div>
          </div>
        </div>
        <div class="two">
          <div class="two-item bd-right">
            <div>154</div>
            <div>国务院政府特殊津贴专家</div>
          </div>

          <div class="two-item">
            <div>154</div>
            <div>国务院政府特殊津贴专家</div>
          </div>
        </div>
      </div>
    </div>
    <Bottom />
    <Topnav />
  </div>
</template>

<script>
import Topnav from "@/components/topnav.vue";
import Bottom from "@/components/bottom.vue";
import Headers from "@/components/headers.vue";

export default {
  name: "",
  data() {
    return {
      graphic: {
        title: "院部概况",
        imgherf: "@/assets/imgs/background2.png",
        text:
          "新的军事科学院学科布局从原有的军事学扩展到理、工、农、医、管、军等多个门类，形成了理论与技术相互融合支撑的全新发展格局。"
      }
    };
  },
  components: {
    Topnav,
    Bottom,
    Headers
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
.title {
  font-weight: 700;
  color: #333333;
  font-size: 48px;
}
.text-center {
  text-align: center;
}
.margin-auto {
  margin: 0 auto;
}
.title-bottom {
  margin-top: 15px;
  width: 111px;
  height: 8px;
  background-color: #b21315;
  border-radius: 8px;
  margin-bottom: 60px;
}
.banner {
  .basic {
    padding: 95px 490px 0 170px;
    height: 1040px;
    background: url(~@/assets/imgs/overview.png) no-repeat center;
    background-size: 100% 100%;
    .text {
      font-weight: 500;
      color: #666666;
      font-size: 18px;
      padding-bottom: 10px;
      line-height: 36px;
    }
  }
  .achievement {
    padding: 95px 330px 0;
    height: 795px;
    margin-top: -258px;
    background-color: #f4f4f4;
    .text {
      font-weight: 500;
      color: #666666;
      font-size: 18px;
      padding-bottom: 10px;
      line-height: 36px;
      text-align: center;
      margin-bottom: 70px;
    }
    .card {
      display: flex;
      justify-content: space-between;
      position: relative;
      .leftbox {
        position: absolute;
        top: 107px;
        left: -150px;
        padding: 12px;
        box-sizing: border-box;
      }
      .rightbox {
        position: absolute;
        top: 107px;
        right: -150px;
        padding: 12px;
        box-sizing: border-box;
      }
      .colorbox {
        width: 90px;
        height: 90px;
        background-color: #b21315;
        i {
          font-size: 70px;
          color: #ffffff;
        }
      }
      .card-item {
        padding: 55px 0 0 0;
        width: 300px;
        height: 300px;
        text-align: center;
        background-color: #b21315;
      }
      .card-item > div:nth-child(1) {
        font-weight: 700;
        color: #ffffff;
        font-size: 32px;
        margin-bottom: 40px;
      }
      .card-item > div:nth-child(2) p {
        font-weight: 700;
        color: #ffffff;
        font-size: 22px;
        line-height: 40px;
      }
    }
  }
  .hospital {
    height: 897px;
    padding: 95px 0 0 0;
    .text {
      font-weight: 500;
      color: #666666;
      font-size: 18px;
      line-height: 36px;
      text-align: center;
      padding: 0 340px 10px;
    }
    .card {
      padding: 0 170px;
      .card-item {
        width: 100%;
        height: 100%;
        position: relative;
        .word {
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          height: 95px;
          background: linear-gradient(transparent, #000);
          font-weight: 700;
          color: #ffffff;
          font-size: 18px;
          padding-top: 56px;
          padding-right: 25px;
          text-align: right;
        }
      }
    }
  }
  .team {
    padding: 95px 330px;
    height: 773px;
    background-color: #f4f4f4;
    .bd-right {
      border-right: 1px solid #707070;
    }
    .there {
      display: flex;
      text-align-last: center;
      .there-item {
        width: 33.33%;
      }
      .there-item > div:nth-child(1) {
        font-weight: 700;
        color: #b21315;
        font-size: 88px;
      }
      .there-item > div:nth-child(2) {
        font-weight: 700;
        color: #666666;
        font-size: 32px;
      }
    }
    .two {
      margin-top: 75px;
      display: flex;
      text-align: center;
      .two-item {
        width: 50%;
      }
      .two-item > div:nth-child(1) {
        font-weight: 700;
        color: #b21315;
        font-size: 88px;
      }
      .two-item > div:nth-child(2) {
        font-weight: 700;
        color: #666666;
        font-size: 32px;
      }
    }
  }
}
</style>
